/**
 * Created by Administrator on 2019/3/5
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {SectionList, StyleSheet, Text, View, FlatList} from 'react-native';


/**
 * FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
 * */
export default class MyList extends Component {
    // 属性检测
    static propTypes = {};
    // 默认值设置
    static defaultProps = {};

    // 初始化state
    constructor(props) {
        super(props);
        this.state = {};
    }

    _onPress = (item) => (
        alert(item)
    );

    render() {
        let data = [{key:"1"},{key:"2"},{key:"3"},{key:"4"}];
        return (
            <View style={styles.container}>

                <FlatList
                    renderItem={
                        ({item})=>(
                            <Text>{item.key}</Text>
                        )
                    }
                    data={data} />

                <SectionList
                    renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={{ fontWeight: "bold" }}>{title}</Text>
                    )}
                    sections={[
                        { title: "Title1", data: ["item1", "item2"] },
                        { title: "Title2", data: ["item3", "item4"] },
                        { title: "Title3", data: ["item5", "item6"] }
                    ]}
                    keyExtractor={(item, index) => item + index}
                />

                <SectionList
                    sections={[
                        {title: 'D', data: ['Devin']},
                        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                    ]}

                    /*renderItem={({item}) => <Text style={styles.item} onPress={() => {
                        this._onPress(item)
                    }}>{item}</Text>}*/
                    /**/
                    renderItem={({item}) => <Text style={styles.item} onPress={this._onPress.bind(this,item)}>{item}</Text>}
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                    keyExtractor={(item, index) => index}
                />
            </View>
            /*<View>
                <FlatList
                    renderItem={({item}) => (
                        <Text
                            style={styles.itemStyle}
                            onPress={() => this._onPress(item)}
                        >My name is {item.key}</Text>
                    )}
                    data={this.props.data}/>
            </View>*/

        );
    }

}

// 构建样式
const styles = StyleSheet.create({
    /*
    * *******    style属性    *******
    * flexDirection        水平：row   竖直：column
    * justifyContent       flex-start、center、flex-end、space-around、space-between以及space-evenly
    * alignItems           flex-start、center、flex-end、stretch。
    * */
    itemStyle: {
        padding: 20,
        fontSize: 20,
        backgroundColor: "#FFFDDD"
    },
    container: {
        flex: 1,
        paddingTop: 22
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
});

